<template>
	<header>
		<div class="return" @click="goBack">
			<i class="fas fa-angle-left" />
		</div>
		<form class="search" action="" onsubmit='return false' @keyup.enter="goSearchList">
			<input type="text" placeholder="新鲜红薯叶" v-model="searchValue" />
		</form>
		<div class="search-btn" @click="goSearchList">搜索</div>
	</header>
</template>

<script setup>
	import {
		useRouter,
		useRoute
	} from 'vue-router'
	import {
		ref
	} from 'vue'
	let router = useRouter()
	let route = useRoute()
	// 点击返回
	const goBack = () => {
		router.back()
	}
	// 点击搜索
	let searchValue = ref(route.query.key || '')
	let goSearchList = () => {
		// console.log(searchValue.value)
		if (!searchValue.value) return // 如果为空不操作
		let searchList = localStorage.getItem('searchList') || '[]'
		let searchArr = JSON.parse(searchList) //转为数据
		searchArr.unshift(searchValue.value)
		// ES6 set 去重
		const uniqueSet = new Set(searchArr)
		const newArray = Array.from(uniqueSet)
		localStorage.setItem('searchList', JSON.stringify(newArray))
		// 页面跳转
		router.push({
			name: 'list',
			query: {
				key: searchValue.value
			}
		})
	}
</script>

<style scoped>
	header {
		display: flex;
		justify-content: space-around;
		align-items: center;
		width: 100%;
		height: 1.23rem;
		font-size: 16px;
		padding: 0.2rem 0.15rem;
		border-bottom: 1px solid #ccc;
		box-sizing: border-box;
	}

	.fa-angle-left {
		font-size: 20px;
		color: #999;
	}

	input {
		width: 7rem;
		height: 0.8rem;
		line-height: 0.8rem;
		font-size: 14px;
		background-color: #fff;
		border: 1px solid #ccc;
		transition: border-color 0.3s ease;
		border-radius: 0.5rem;
		padding-left: 10px;
	}

	input:focus {
		outline: none;
		border-color: red;
	}
</style>